<template>
    <div class="header-box">
        <div class="header-box-item user-info">
            <n-avatar :src="logoImg" round :size="40"></n-avatar>
        </div>
        <router-link to="/dashboard" class="header-box-item" :class="{ active: route.path == '/dashboard' }">
            <n-icon size="24" :component="DashboardOutlined" />
            <span class="header-box-item-text">仪表盘</span>
        </router-link>
        <router-link to="/index" class="header-box-item" :class="{ active: route.path == '/index' }">
            <n-icon size="24" :component="TableOutlined" />
            <span class="header-box-item-text">索引</span>
        </router-link>
        <router-link to="/query" class="header-box-item" :class="{ active: route.path == '/query' }">
            <n-icon size="24" :component="SearchOutlined" />
            <span class="header-box-item-text">搜索</span>
        </router-link>
    </div>
    <router-view />
</template>

<script setup lang="ts">
import { DashboardOutlined, TableOutlined, SearchOutlined, } from '@vicons/antd'
import { useRoute } from 'vue-router';
import logoImg from '../assets/favicon.ico';
const route = useRoute();

</script>

<style lang="less" scoped>
.header-box {
    background-color: #fff;
    position: fixed;
    top: 16px;
    left: 24px;
    width: auto;
    height: 48px;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 24px 8px 8px 24px;
    box-shadow: 2px 1px 8px 1px rgb(228 232 235);
    padding-left: 4px;

    .header-box-item {
        position: relative;
        cursor: pointer;
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 32px;
        padding: 0 18px;
        margin: 0 4px;
        border-radius: 4px;
        text-decoration: none;
        color: #000000;

        &.active {
            color: #13cbd1;
        }

        &:hover {
            background-color: rgba(219, 219, 219, 0.23);
        }

        .header-box-item-text {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            letter-spacing: 0;
        }

    }

    .user-info {
        padding: 0px;
        position: relative;
        cursor: default;
    }
}
</style>